<template>
  <div class="body">
    <div class="sider">
      <ul>
        <router-link to="/userInfo/personal">
          <li style="list-style-type: none; margin-bottom: 20px">
            个人资料
          </li>
        </router-link>
        <router-link to="/userInfo/account">
          <li style="list-style-type: none; margin-bottom: 20px">
            账号设置
          </li>
        </router-link>
        <router-link to="/userInfo/notice1">
          <li style="list-style-type: none; margin-bottom: 20px">
            公告
          </li>
        </router-link>
        <router-link to="/userInfo/notice2">
          <li style="list-style-type: none; margin-bottom: 20px">
            点赞
          </li>
        </router-link>
        <router-link to="/userInfo/notice3">
          <li style="list-style-type: none; margin-bottom: 20px">
            评论
          </li>
        </router-link>
        <router-link to="/userInfo/message">
          <li style="list-style-type: none; margin-bottom: 20px">
            私信
          </li>
        </router-link>
        <router-link to="/userInfo/noticeSet">
          <li style="list-style-type: none; margin-bottom: 20px">
            消息设置
          </li>
        </router-link>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
  components: {
  },
});
</script>

<style scoped>
.body {
  height: auto;
  width: 66%;
  margin: 20px 17% 0 17%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content {
  height: auto;
  width: 80%;
  padding: 20px 20px 0 20px;
  margin: 0;
  min-width: 530px;
  background: #edf9ff;
}

.sider {
  height: 320px;
  width: 20%;
  padding: 20px 20px 0 20px;
  margin: 0 10px 0 0;
  min-width: 200px;
  background: #edf9ff;
}
</style>